<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Station Device Application</title>
	<link rel="icon" href="/favicon.ico" type="image/x-icon">

	<link href="/public/css/device.css?version=1" rel="stylesheet" type="text/css" />
	<link href="/public/lib/bootstrap/4.6.1/css/bootstrap.css" rel="stylesheet">
	<link href="/public/lib/adminlte/js/adminlte.min.js" rel="stylesheet" type="text/css" />
	<link href="/public/lib/adminlte/css/adminlte.min.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript" src="/ajax/libs/vue/2.7.10/vue.js"></script>
	<script src="/ajax/libs/axios/0.21.0/axios.min.js"></script>

	<script type="text/javascript" src="/ajax/libs/iview/3.5.0/iview.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/ajax/libs/iview/3.5.0/styles/iview.css">

	<link href="/public/lib/ionicons/3.0.0/css/ionicons.css" rel="stylesheet">
	<link href="/ajax/libs/font-awesome/5.15.4/css/all.css" rel="stylesheet">
</head>
<body>
<div id="app" class="app-container">
	<div class="kc-menu-fixed">
		<i-menu mode="horizontal" ref="menu" class="kc-menu"  :active-name="activeMenu">
			<menu-item v-for="menu in menus"  :key="menu.name"  :name="menu.name" :to="menu.url" >
				<i :class="menu.icon"></i>
				{{menu.title}}
			</menu-item>
		</i-menu>
	</div>
	<section class="content">
		<div class="container-fluid">
			<!-- Horizontal Form -->
			<div class="card" style="margin-top: 1rem">
				<div class="card-header">
					<h3 class="card-title"><i class="fas  fa-th-large"></i> {{ i18n["device.html.station_related"]}}</h3>
					<div class="card-tools">
						<button type="button" v-show="!inEmergency" class="btn btn-danger" style="margin-left: 1rem" @click="emergency(true)"> {{ i18n["device.html.system_stop"]}}</button>
						<button type="button" v-show="!!inEmergency" class="btn btn-info" style="margin-left: 1rem" @click="emergency(false)"> {{ i18n["device.html.system_start"]}}</button>
					</div>
				</div>
				<!-- /.card-header -->
				<!-- form start -->

					<div class="card-body">
						<div class="form-group row">
								<label for="inputEmail3" class="col-sm-2 col-form-label">{{ i18n["device.html.station_code"]}}</label>
								<div class="input-group col-sm-10">
									<input type="text" class="form-control" v-model="stationCode" readonly>
									<span class="input-group-append">
									<button type="button" class="btn btn-outline-primary btn-flat" @click="getStationCode()">{{ i18n["device.html.refresh"]}}</button>
								  </span>
								</div>
						</div>

					</div>
					<!-- /.card-body -->
			</div>

			<!-- general form elements -->
			<div class="card" style="margin-top: 1rem">
				<div class="card-header">
					<h3 class="card-title"> <i class="fas  fa-th-large"></i> {{ i18n["device.html.ipc_info"]}}</h3>
				</div>
				<!-- /.card-header -->
				<!-- form start -->
					<div class="card-body">
						<div class="form-group row">
							<label for="inputEmail3" class="col-sm-2 col-form-label">{{ i18n["device.html.device_code"]}}</label>
							<div class="input-group col-sm-10">
								<input type="text" class="form-control" v-model="deviceCode" readonly>
								<span class="input-group-append">
									<button type="button" class="btn btn-outline-primary btn-flat" @click="copyToClipboard" >{{ i18n["device.html.copy"]}}</button>
								  </span>
							</div>
						</div>
						<div class="form-group row">
							<label for="inputEmail3" class="col-sm-2 col-form-label">{{ i18n["device.html.local_ip"]}}</label>
							<div class="input-group col-sm-10">
								<input type="text" class="form-control" v-model="properties.localIP" readonly>
							</div>
						</div>
						<div class="form-group row">
							<label for="inputEmail3" class="col-sm-2 col-form-label">{{ i18n["device.html.server_ip"]}}</label>
							<div class="input-group col-sm-10">
								<input type="text" class="form-control" v-model="properties.hostIP" readonly>
							</div>
						</div>
					</div>
					<!-- /.card-body -->
			</div>
			<!-- /.card -->
		</div>
	</section>
</div>

<script>
    var app = new Vue({
        el: '#app',
		data () {
			return {
				i18n:{},
				activeMenu:'index',
				menus:[{
					name:'index',
					url:'/admin/device/index',
					icon:'fas fa-warehouse',
					title:'系统信息'
				},{
					name:'config',
					url:'/admin/device/config',
					icon:'fas fa-cogs',
					title:'设置'
				}],
				deviceUrl: "http://localhost:8888/station/device/code",
				deviceCode: "1231232",
				stationCode: "",
				inEmergency: false,
				localIP: "127.0.0.1",
				hostIP: "127.0.0.1",
				visible: false,
				properties:{}
			}
		},
		mounted() {
			window.app = this;
			// 界面初始化信息
			this.getI18NResource();
			this.getMenus(this.activeMenu);
			// 界面数据初始化
			this.init();
		},
		methods: {
			init(){
				this.getDeviceProperties();
				this.getDeviceCode();
				this.getStationCode();
			},
			getI18NResource(){
				axios.get('/admin/i18n/mappings/default')
						.then(response => {
							let result = response.data
							this.i18n = result.data;
						})
						.catch(error => {
							this.$Message.error({content: this.i18n["device.error.FAIL"]+":"+error, duration: 3, closable: true});
						});
			},
			getMenus(activeMenu){
				axios.get('/admin/device/menus')
						.then(response => {
							if(!response.data.success){throw response.data.message;}
							let result = response.data
							this.menus = result.data;
							this.$nextTick(() => {
								this.$refs.menu.updateActiveName(activeMenu);
							});
						})
						.catch(error => {
							this.$Message.error({content: this.i18n["device.error.FAIL"]+":"+error, duration: 3, closable: true});
						});
			},
			reload(){
				window.location.reload();
			},
			refreshData(){

			},
			copyToClipboard() {
				try {
					this.copy(this.deviceCode)
					this.$Message.success(this.i18n["device.error.SUCCESS"]);
				} catch (error) {
					this.$Message.error({content: this.i18n["device.error.FAIL"]+":"+error, duration: 3, closable: true});
				}
			},
			copy(text) {
				// 传统方案：创建临时 textarea 并执行复制
				let textarea = document.createElement('textarea');
				textarea.value = text;
				textarea.style.position = 'fixed';
				document.body.appendChild(textarea);
				textarea.select();
				document.execCommand('copy');
				document.body.removeChild(textarea);
			},
			getDeviceCode(){
				// 不带参数
				axios.get('/station/device/code')
						.then(response => {
							let str = response.data
							this.deviceCode = str.data;
						})
						.catch(error => {
							this.$Message.error({content: this.i18n["device.error.FAIL"]+":"+error, duration: 3, closable: true});
						});
			},
			getStationCode(){
				axios.get('/station/device/stationCode')
						.then(response => {
							let result = response.data
							if(result.data){
								this.stationCode = result.data;
							}
							if (this.stationCode  === null || this.stationCode  === undefined || this.stationCode  === "") {
								this.stationCode = this.i18n["device.html.not_bind"]
							}
						})
						.catch(error => {
							this.$Message.error({content: this.i18n["device.error.FAIL"]+":"+error, duration: 3, closable: true});
						});
			},
			getDeviceProperties(){
				axios.get('/station/device/properties/get')
						.then(response => {
							let result = response.data
							this.properties = result.data;
						})
						.catch(error => {
							this.$Message.error({content: this.i18n["device.error.FAIL"]+":"+error, duration: 3, closable: true});
						});
			},
			emergency(suspend) {
				this.inEmergency = !this.inEmergency;
				let params = new URLSearchParams();
				params.append('suspend', suspend);
				axios.get('/station/device/emergency', {
					params: params
				})
				.then(response => {
					// 返回异常则抛出异常信息
					if(!response.data.success){throw response.data.message;}
					this.$Message.success(this.i18n["device.error.SUCCESS"]);
				})
				.catch(error => {
					this.$Message.error({content: this.i18n["device.error.FAIL"]+":"+error, duration: 3, closable: true});
				});
			},
		}
	});
	//app.use(ViewUIPlus);
	//app.mount("#app");
	function refreshData() {
		window.app.refreshData();
	}
</script>
</body>
</html>